<template>
	<view class="content">
	    <!-- 公共组件-每个页面必须引入 -->
	    <public-module></public-module>
		<u-sticky bgColor="#fff">
				<u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" :current="current" @change="changeTab" ref="tab" :scrollable="false">
						
				</u-tabs>
		  </u-sticky>
		  <div class="con-list-div">
				<div class="sale-list-item arrangeGoods-item" v-for="(item,index) in list" :key="index">
				  <div class="sale-top"  style="cursor: pointer">
					<div class="sale-compeny" style="cursor: pointer">发货仓库：{{item.takeWarehouse}}</div>
				  </div>
				  <div class="sale-con" style="cursor: pointer">
					 <div class="goods-top">
						 <div class="goods-name">{{item.goodsSn}}</div>
						 <div class="goods-price">{{item.planNum}}<span class="label">吨</span></div>
					 </div>
					 <div class="goods-middle">
						 <div class="goods-subtxt">排货单号：{{item.billSn}}</div>
						 <div class="goods-subtxt">订单编号：<span style="color:#409EFF;cursor: pointer;" @click="toOrder(item)">{{item.orderSn}}</span></div>
						 <div class="goods-subtxt">
							司机姓名：{{item.driverName}}
						 </div>
						 <div class="goods-subtxt">
							司机手机：{{item.driverMobile}}
						 </div>
						 <div class="goods-subtxt">
							车牌号：{{item.driverTruckNo}}
						 </div>
					 </div>
				  </div>
				  <div class="sale-btn"  >
						<u-button text="生成提货码" size="small" shape="circle" :custom-style="style2" type="warning" @click="showImg(item)" v-if="type == '1'"></u-button>
						<u-button text="查看物流" size="small" shape="circle" :custom-style="style2" type="warning" @click="toLogisticsPage(item)" v-if="type == '2' && item.isOrderDeliver == 1"></u-button>
				  </div>
				</div>
		  </div>
		  
		  <u-popup :show="show" @close="closeShow" mode="center">
			  <view style="width: 600rpx; height: 600rpx">
				  <img style="width: 600rpx; height: 600rpx" :src="base64Text" v-if="base64Text"/>
			  </view>
			  <!-- #ifdef  MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-MP-KUAISHOU -->
			  <div style="padding:0 40rpx 40rpx 40rpx;">
				  <u-button text="下载" size="small" shape="circle" type="warning" @click="downImg(item)"></u-button>
			  </div>
			  <!--#endif-->
			  <!--#ifdef H5-->
			    <div style="padding:0 40rpx 40rpx 40rpx;font-size: 24rpx;color:#888;text-align: center;">长按保存图片</div>
			  <!--#endif-->
			  
		 </u-popup>

		  <div style="padding-bottom:40rpx;" >
			  <u-loadmore :status="status"></u-loadmore>
		  </div> 
	</view>
</template>

<script>
	import{imgCheck} from '@/plugins/upload/upload.js'
	import {pageSeo,planGoodsList,getPrintImage} from '@/config/api.js'
	import {downloadFun,saveBase64} from '@/plugins/utils.js'
	import store from '@/store';
	export default {
	    components:{
	       
	    },
	    data() {
	        return {
				tabs: [
					{key:'1',name:'自提'},
					{key:'2',name:'送到'},
					],
				status: 'loadmore',
				list: [],
				pageNum: 0,
				pageSize:10,
				count:0,
				current:0,
				style2:{
					width:'160rpx',
					border:'none'
				},
				type:'1',
				btnLoading:false,
				
				show:false,
				base64Text:''
			
	        }
	    },
	    async onLoad(e) {
				await this.$onLaunched;
				this.clearData();
				this.getList();
				
	    },
		async onShow() {
			// #ifdef H5
			pageSeo({pageType: 'indexPage'}).then((res)=>{
				document.title = res.pageTitle;
			})
			// #endif	
		},
		onReachBottom() {
			if(this.list.length >= this.count) {
				this.status = 'nomore';
				return ;
			}
			this.pageNum = ++ this.pageNum;
			this.getList()
			
		},
	    methods: {
			toOrder(item){
				uni.navigateTo({
				    url:'/pages/my/orderInfo?orderId='+item.orderId
				})
			},
			//去物流页
			toLogisticsPage(item){
				uni.navigateTo({
				    url:'/pagesUser/order/logisticsInfo?orderId='+item.orderId
				})
			},
		   showImg(item){
		      this.show = true
		      this.base64Text = ''
		      getPrintImage({billId:item.billId,billSn:item.billSn}).then((res)=>{
		        this.base64Text = res
		      })
		    },
		    downImg(){
		      saveBase64(this.base64Text)
			  this.show = false
		    },
		   closeShow(){
			   this.show = false
		   },
		
			searchList(){
				this.clearData();
				this.getList()
			},
			
			changeTab(tab){
				this.type = tab.key
				this.clearData()
				this.getList()
				
			},
			
			//清除数据
			clearData(){
					this.pageNum = 1;
					this.list = [];
					this.status = 'loadmore';
					this.count = 0;
			},
			
			getList(){
				let data = {};
				data.pageSize = 10;
				data.pageNum = this.pageNum;
				data.type = this.type
				this.status = 'loading';
			    return	planGoodsList(data).then((res)=>{
				  this.list = this.list.concat(res.list ? res.list : [] );
				  this.count = res.count;
				  if(this.list.length >= this.count) {
					this.status = 'nomore';
				  }else{
					this.status = 'loadmore';
				  }	
				}).catch(()=>{
					this.status = 'loadmore';
				})
			},
		
	    },
	
	}
</script>

<style lang="scss">
@import '@/style/common.scss';
.con-list-div{
    padding:8px 12px;
	.sale-list-item{
		  cursor: pointer;
		  background: #fff;
		  margin-bottom:$marginSpace;
		  border-radius: 8px;
		  font-size:$m-font;
		  line-height: 24px;
		  padding:0 16px;
		  .sale-top{
			  padding-top:5px;
			  line-height:40px;
			  border-bottom:0.8px solid $border-color;
			  @include flexbox(space-between,center);
			  .sale-compeny{
				  @include textoverflow(1);
				  padding-right:16px;
			  }
			  .sale-state{
				  color:$u-primary;
			  }
		  }
		  .sale-con{
			 padding-top:5px; 
			.goods-top{
				@include flexbox(space-between,center);
				.goods-name{
					font-size:$m-font;
					padding-right:20px;
				}
				.goods-price{
					font-size:$m-font;
					font-weight:bold;
					white-space:nowrap;
					.label{
						font-size:10px
					}
				}
			}
			.goods-middle{
				.goods-subtxt{
					font-size:$s-font;
					color:$g-font-color;
				}
			}
		  }
		  .sale-bottom{
			line-height:40px;
			text-align: right;
			color:#888;
		  }
		  .sale-btn{
			padding:10px 0;
			text-align: right;
			border-top:0.8px solid $border-color;
			overflow: hidden;
			@include flexbox(flex-end,center);
		  }

		}
}


.popupTitle{
	font-size:$b-font;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
}
.popup-con{
	padding:0 16px 16px 16px;
}
.popup-con#inovlceList{
	
	.u-radio-label--right{
		padding:8px 0 !important
	}
}
.popup-bottom{
	background: #fff;
	margin-top:10px;
	padding:16px;
}
.popup-bottom-fixed{
	position: fixed;
	width:100%;
	padding:16px;
	box-sizing: border-box;
	bottom:0
}
#invoiceUpdiv .u-upload{
	align-items: center;
}
#invoiceRadio .u-radio{
	margin-right:30px
}
    


</style>

